<template>
  <view
    v-if="xian"
    style="
      width: 100%;
      height: 100%;
      position: absolute;
      opacity: 0;
      z-index: 9999999;
      background-color: aqua;
    "
  >
  </view>
  <view>
    <view v-if="qing" style="display: flex; justify-content: center">
      <uni-countdown
        ref="daojis"
        :start="start"
        :font-size="24"
        background-color="#029d94"
        @timeup="timeup"
        :show-day="false"
        :minute="0"
        :second="2990"
      />
    </view>
    <view
      style="text-align: center; width: 60%; margin: 20px auto; font-size: 20px"
      >字体大小
      <br />
      <slider
        min="14"
        max="30"
        :value="fonSize"
        show-value
        @change="sliderChange"
      />
    </view>
    <uni-card 
      v-for="(item, index) in daili.data"
      :title="item.subject"
      :extra="zneg + 1 + '/' + data.data.length"
    >
      <view style="margin-bottom: 20px">
        <progress
          activeColor="#029d94"
          :percent=" Math.floor((zneg / data.data.length) * 100)"
          show-info
          stroke-width="3"
        />
      </view>
      <text class="fonsize"> {{ item.title }}</text>
      <br />
      <radio-group v-if="chongz" ref="sod" style="margin-top: 10px" @change="radioChange">
        <label
          class="uni-list-cell uni-list-cell-pd"
          v-for="(items, index) in item.options"
          :key="item.value"
        >
          <view style="margin: 10px 0">
            <radio
              activeBackgroundColor="#029d94"
              :disabled="disabled"
              color="#029d94"
              :checked="index == current"
              :value="items.value"
            />
            <span class="fonsize">
              {{ items.text }}
            </span>

            <span style="float: right" v-show="items.value === bianse">
              <span v-show="false">正确答案 {{ items.value }}</span>
              <uni-icons
                type="checkmarkempty"
                color="#029d94"
                size="20"
              ></uni-icons>
            </span>
          </view>
        </label>
      </radio-group>
    </uni-card>
  </view>
</template>

<script setup lang="ts">
import {
  onMounted,
  ref,
  reactive,
  onBeforeUnmount,
  getCurrentInstance,
} from "vue";
import {getKemushiti} from "../../api/login";
const sod = ref(null);
// 分数
let chongz=ref(true)
let fenshu = ref(0);
const daojis: any = ref(null);
// 选中的数据
const sexs: any = ref();
const bianse: any = ref();
let disabled = ref(false);
let zneg = ref(0);

let xian = ref(false);
let qing = ref(true);
let current = ref(10000);

const start = ref(true);
const xuanzeshuju: any = reactive([]);
let cuo = ref(0);
let dui = ref(0);

let getid = ref();
let data = reactive({
  data: [],
});
// 开始就代理
const dai = () => {
  daili.data.push(data.data[0]);
};
const getshiti = async () => {
  const daAss = await getKemushiti(getid.value);

  data.data = daAss.data.data;
if(!data.data){

}
  
  dai();
};

onBeforeUnmount(() => {
  qing.value = false;
});
const radioChange = (e: any) => {
  sexs.value = e.detail.value;
  xuanzeshuju.push(e.detail.value);
  disabled.value = true;

  xian.value = true;

  setTimeout(() => {
    let items = daili.data[0].options;
    for (let i = 0; i < items.length; i++) {
      if (items[i].value === e.detail.value) {
        current.value = i;
        break;
      }
    }
    bianse.value = daili.data[0].correct;
    // 判断是否选择正确

    if (sexs.value == bianse.value) {
      dui.value++;

      fenshu.value = (dui.value / data.data.length) * 100;
    } else {
      cuo.value++;
    }
  }, 500);
  setTimeout(() => {
    chongz.value=false
    xian.value = false;

    if (data.data[zneg.value + 1]) {
      disabled.value = false;
      zneg.value++;
      daili.data = [data.data[zneg.value]];
      bianse.value = 10000;
    } else {
      start.value = false;
      uni.navigateTo({
        url: `/subpkg/leiji/index`,
        success: function (res: any) {
          // 通过eventChannel向被打开页面传送数据
          res.eventChannel.emit(
            "acceptDataFromOpenerPage",

            {
              fenshu: fenshu.value,
              index: data.data.length,
              cuo: cuo.value,
              dui: dui.value,
              time: daojis.value.second - daojis.value.seconds,
              data: data.data,
              xuanzeshuju: xuanzeshuju,
            }
          );
        },
      });
    }
  setTimeout(()=>{
    chongz.value=true
  },200)
  }, 2000);
};
// 代理数据
const daili: any = reactive({
  data: [],
});
let fonSize = ref(18);
let fonSizet = ref("");
let sliderChange = (e: any) => {
  fonSize.value = e.detail.value;
  console.log(fonSize.value);
  fonSizet.value = fonSize.value + "px";
};

const timeup = () => {
  disabled.value = true;
  uni.showModal({
    title: "提醒",
    content: "时间到！！",
    success: function (res) {
      if (res.confirm) {
        uni.navigateTo({
          url: `/subpkg/leiji/index`,
          success: function (res: any) {
            // 通过eventChannel向被打开页面传送数据
            res.eventChannel.emit(
              "acceptDataFromOpenerPage",

              {
                fenshu: fenshu.value,
                index: data.data.length,
                cuo: cuo.value,
                dui: dui.value,
                time: daojis.value.second - daojis.value.seconds,
                data: data.data,
                xuanzeshuju: xuanzeshuju,
              }
            );
          },
        });
      } else if (res.cancel) {
        console.log("用户点击取消");
      }
    },
  });
};
const theme = reactive({
  color: "red",
});
onMounted(() => {

  const instance = getCurrentInstance()?.proxy;
// @ts-ignore
const eventChannel = instance.getOpenerEventChannel();



eventChannel.on("acceptDataFromOpenerPage", function (data: any) {
  getid.value = data.id;
  console.log(data.id);
  getshiti();
});

});
</script>

<style scoped>
.fonsize {
  font-size: v-bind("fonSizet");
}
.bianse {
  background-color: aqua;
}
::v-deep .checklist-group {
  display: block !important;
  margin-top: 20px;
}

::v-deep .checklist-box {
  margin: 20px 0 !important;
}
</style>
